<template>
    <div class="set-box">
        <!-- 仓库设置 -->
        <serchForm :Form="inventoryForm" :FormLabel="inventoryFormLabel" @onSearch="onSearch" />
        <div class="function-box" v-if="checkPermi(['system:warehouse:edit'])">
            <el-button class="createBtn" @click="addInventory"><i class="iconfont icon-plus-square" />新增</el-button>
            <el-button class="reviseBtn" @click="updateInventory"><i class="iconfont icon-xiugai" />修改</el-button>
            <el-button class="exportBtn" @click="deleteWarehouse"><i class="iconfont icon-shanchu" />删除</el-button>
        </div>
        <forTableCom :color="color" :idActive="idActive" :bg="bg" :total="totals" :page="pageNum" 
            :limit="pageSize" @handleSelectionChange="handleSelectionChange" @handleChange="handleChange"
            @updatePage="updatePage" @updateLimit="updateLimit" :tableHeaderData="inventoryTableHeaderData"
            :tableData="inventoryTableData">
        </forTableCom>
        <setPop v-if="flag" :popTitle="popTitle" @popUpsFlase="popUpsFlase" @getWarehouseData="getWarehouseData" :assignmentData="assignmentData"/>
    </div>
</template>
<script setup>
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue'
import setPop from './components/setPop'
import { querySelectWarehouseApi, deleteWarehouseApi } from '@/api/inventory'
import { ref, onMounted } from 'vue'
import { updatePopHook } from '@/hook/setPop/updatePop.js';
import { deletePopHook } from '@/hook/setPop/deletePop.js';
import { sliceDate } from '@/utils/date.js'
import { ElMessage } from 'element-plus';
import { checkPermi } from "@/utils/permission.js";

let updatePop = updatePopHook()
let deletePop = deletePopHook()
const idActive = 'warehouseId'

let flag = ref(false)
let popTitle = ref('新增仓库')
// 数据回显
let assignmentData = ref([])
// 表单
let inventoryForm = ref({
        warehouseName: '',  // 仓库名称
        warehouseId: '',    // 仓库编号
        creationTime: '',    // 新增日期
        responsiblePerson: '',  // 经办人
        responsiblePhone: '',       // 联系电话
    })
// 表单数据标题
let inventoryFormLabel = ref([
    {
        name: 'warehouseName',
        label: '仓库名称'
    },
    {
        name: 'warehouseId',
        label: '仓库编号'
    },
    {
        name: 'creationTime',
        label: '新增日期',
        type: 'picker'
    },
    {
        name: 'responsiblePerson',
        label: '经办人'
    },
    {
        name: 'responsiblePhone',
        label: '联系电话'
    },
])

// 查找
const onSearch = (v) => {
    // 每次查询后回到页1
    pageNum.value = 1
    querySelectWarehouseFn(v)
}
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')
// 总条目数   pageSize 加 1
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref([])

// 表格表头数据
let inventoryTableHeaderData = ref([
    {
        prop: 'warehouseId',
        label: '仓库编号',
        colorClassName: 'activeColor'
    },
    {
        prop: 'warehouseName',
        label: '仓库名称',
        colorClassName: 'activeColor'
    },
    {
        prop: 'creationTime',
        label: '新增日期',
        colorClassName: 'activeColor'
    },
    {
        prop: 'responsiblePerson',
        label: '经办人'
    },
    {
        prop: 'responsiblePhone',
        label: '联系电话'
    },
    {
        prop: 'warehouseAddress',
        label: '仓库地址',
        colorClassName: 'activeColor'

    },
    {
        prop: 'remarks',
        label: '备注',
        colorClassName: 'activeColor'

    },
])
// 表格数据内容
let inventoryTableData = ref([])
// 选中的列
const handleSelectionChange = (v) => {
    multipleSelection.value = v
    console.log(v);
}

// 分页器大小  当前分页器
const handleChange = (v) => {
    let { page, limit } = v.page
    pageNum.value = page
    pageSize.value = limit
    let obj = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
    }
    let params = Object.assign(obj,inventoryForm.value[0])
    querySelectWarehouseFn(params)
}
// 当前页面位置发生变化
const updatePage = (v) => {
    console.log('页面位置发生变化', v);
}
// 条目个数发生变化
const updateLimit = (v) => {
    console.log('条目个数发生变化', v);
}
// 仓库设置查询
const querySelectWarehouseFn = async (params = '') => {
    console.log(params);
    let res = await querySelectWarehouseApi(params)
    let { code, rows ,total} = res
    try {
        if (code == 200) {
            sliceDate(rows, 'creationTime')
            inventoryTableData.value = rows
            totals.value = total
        }
    } catch {

    }
}

// 打开新增仓库弹窗
const addInventory = () => {
    flag.value = true;
    assignmentData.value = []
    popTitle.value = '新增仓库';
}
// 修改仓库弹窗
const updateInventory = async () => {
    // 数据
    let params = {
        'warehouseId':multipleSelection.value[0].warehouseId
    }
   let res = await querySelectWarehouseApi(params)
    let { code, rows } = res
    try {
        if (code == 200) {
            sliceDate(rows, 'creationTime')
            assignmentData.value  = rows
            updatePop(multipleSelection, flag, popTitle, '修改仓库')
        }
    } catch {

    }
}
// 删除仓库
const deleteWarehouse = () => {
    let fn = async () => {
        let params = {
            warehouseId: multipleSelection.value[0].warehouseId
        }
        let res = await deleteWarehouseApi(params)
        let { code, msg } = res
        if (code == 200) {
            getWarehouseData()
            ElMessage({
                message: msg,
                type: 'success',
            })
        }
    }
    deletePop(multipleSelection, fn)
}
// 关闭弹窗
const popUpsFlase = (props) => {
    flag.value = props;
}
// 新增后调用获取最新数据
const getWarehouseData = () => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
    }
    querySelectWarehouseFn(params)
}
onMounted(() => {
    getWarehouseData()
})
</script>
<style scoped lang='scss'>
.set-box {
    padding: 16px;
}
</style>
